<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { margin: 0; padding: 0; }
        .box { width: 512px; height: 400px; border: 1px solid #CC00FF; overflow: hidden; margin: 20px auto;  position: relative; }
        .socrollTop,.socrollBottom {
            width: 100%;
            height: 200px;

        }
        .socrollBottom {   background-color: rgba(0, 0, 0, 0.5); }
        .img { position: absolute; top: 0; left: 0 ; z-index: -1; }
    </style>
</head>
<body>


<div class="box">
    <div class="socrollTop" id="sTop"></div>
    <div class="socrollBottom" id="sBottom"></div>
    <img class="img" id="Img" src="images/mi.png" alt=""/>
</div>

<script>
    window.onload = function (){
        function $(element) {
            return document.getElementById(element);
        }
        var sTop = $('sTop');
        var sBottom = $('sBottom');
        var Img = $('Img');
        var timer = null;
        var y = 0 ;
        var imgH = Img.height;
        sTop.onmouseover = function(){
            clearInterval( timer );
            timer = setInterval(function(){
                if( y > -(imgH-400) ) {
                    y -= 5;
                    Img.style.top = y + 'px';
                }else {
                    clearInterval( timer );
                    timer = null ;
                }
            },15);
        };
        sBottom.onmouseover = function(){
            clearInterval( timer );
            timer = setInterval(function(){
                if( y < 0 ) {
                    y += 5;
                    Img.style.top = y + 'px';
                }else {
                    clearInterval( timer );
                    timer = null ;
                }
            },15);
        };
        sBottom.parentNode.onmouseout = function(){
            clearInterval( timer );
            timer = null ;
        }
    }

</script>




</body>
</html>